<!DOCTYPE html>
<html lang="zh">
<header>
    <meta charset="utf-8" />
    <title>Wi-Fi 配网系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 20px;
            color: #333;
        }

        h2,
        h4 {
            color: #2c3e50;
        }

        .container {
            max-width: 600px;
            margin: auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .seccontainer {
            margin: auto;
            background: white;
            padding: 10px;
        }

        .sys-container {
            display: flex;
            align-items: center;
            background: white;
        }

        .sys-container label {
            width: 20%;
            margin: 5px 0 15px 0;
        }

        .sys-container input[type="text"] {
            width: 60%;
            padding: 10px;
            margin: 5px 15px 15px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .sys-container input[type="radio"] {
            transform: scale(1.5);
            margin: 5px 10px 15px 0;
        }
        .sys-container input[type="checkbox"] {
            transform: scale(1.5);
            margin: 5px 10px 15px 0;
            
        }

        .sys-container button {
            width: 20%;
            height: 40px;
            background-color: #1aa147;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            margin: 5px 0px 15px 0;
            transition: background-color 0.3s;
        }

        button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            margin: 5px 0;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #2980b9;
        }

        select,
        input[type="text"] {
            width: 100%;
            padding: 10px;
            margin: 5px 0 15px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        #aplist {
            height: 40px;
        }

        .status {
            font-weight: bold;
            margin-top: 10px;
        }
    </style>
    <script type="text/javascript">
        function led(key) {
            fetch("/led/" + key)
        }
        function wifi_get_aplist() {
            var resp = fetch("/scan/list").then(function (resp) {
                console.log(resp, resp.status)
                if (resp.status != 200) {
                    return
                }
                resp.json().then(function (data) {
                    console.log("data", data)
                    var tmp = ""
                    for (let index = 0; index < data.data.length; index++) {
                        const apname = data.data[index];
                        if (index == 0) {
                            tmp += "<option vaule='" + index + "' selected>" + apname + "</option>\n"
                            document.getElementById("ssid").value = data.data[0]
                        }
                        else {
                            tmp += "<option vaule='" + index + "'>" + apname + "</option>\n"
                        }

                    }
                    document.getElementById("aplist").innerHTML = tmp

                })
            })
        }
        function wifi_scan() {
            fetch("/scan/go")
            setTimeout(wifi_get_aplist, 3000)
        }
        function wifi_connect() {
            var ssid = document.getElementById("ssid").value
            var passwd = document.getElementById("passwd").value
            console.log(ssid, passwd)
            fetch("/connect", {
                method: "POST",
                body: JSON.stringify({ ssid: ssid, passwd: passwd })
            }).then(function (resp) {
                if (resp.status == 200) {
                    alert("正在尝试连接")
                }
                else {
                    alert("出了点问题")
                }
            })
        }
        function wifi_ipstat() {
            fetch("/connok").then(function (resp) {
                if (resp.status != 200)
                    return
                resp.json().then(function (data) {
                    console.log(data)
                    if (data && data.ip != "0.0.0.0") {
                        document.getElementById("ipstat").innerHTML = "已联网"
                    }
                })
            })
        }
        function select_changed(event) {
            var apselect = document.getElementById("aplist")
            var ssid = document.getElementById("ssid")
            ssid.value = apselect.options[apselect.selectedIndex].text
        }
        setTimeout(wifi_get_aplist, 3000)
        // setInterval(wifi_ipstat, 3000)
        function wifi_mode_change(key) {
            var wifi_checkbox = document.getElementById("WIFI")
            var g4_checkbox = document.getElementById("4G")
            if (key === 'WIFI') 
            {
                if (wifi_checkbox.checked) {
                    g4_checkbox.checked = false
                }else{
                    wifi_checkbox.checked = false
                }
            }
            else if (key === '4G') {
                if (g4_checkbox.checked) {
                    wifi_checkbox.checked = false
                }else{
                    g4_checkbox.checked = false
                }
            }
        }
        function dev_restart() {
            fetch("/restart").then(function (resp) {
                if (resp.status == 200) {
                    alert("设备正在重启")
                }
                else {
                    alert("出了点问题")
                }
            })
        }
        function get_param() {
            fetch("/getparam").then(function (resp) {
                if (resp.status != 200)
                    return
                resp.json().then(function (data) {
                    console.log(data)
                    var res = data.data
                    if (res) {
                        alert("获取参数成功")
                        document.getElementById("HPROJECT").innerText = res.HPROJECT
                        document.getElementById("DEV_NUMBER").innerText = res.DEV_NUMBER
                        document.getElementById("IMEI").innerText = res.IMEI
                        document.getElementById("ICCID").innerText = res.ICCID
                        document.getElementById("SERVER1_FLAG").checked = res.SERVER1_FLAG
                        document.getElementById("SERVER1").value = res.SERVER1
                        document.getElementById("SERVER2_FLAG").checked = res.SERVER2_FLAG
                        document.getElementById("SERVER2").value = res.SERVER2
                        document.getElementById("SERVER3_FLAG").checked = res.SERVER3_FLAG
                        document.getElementById("SERVER3").value = res.SERVER3
                        document.getElementById("SERVER4_FLAG").checked = res.SERVER4_FLAG
                        document.getElementById("SERVER4").value = res.SERVER4
                        document.getElementById("REG_FLAG").checked = res.REG_FLAG
                        document.getElementById("REG").value = res.REG
                        document.getElementById("HEART_FLAG").checked = res.HEART_FLAG
                        document.getElementById("HEART").value = res.HEART
                        if (res.NETMODE == 2) {
                            document.getElementById("WIFI").checked = true
                            document.getElementById("4G").checked = false
                        }
                        else if (res.NETMODE == 1) {
                            document.getElementById("WIFI").checked = false
                            document.getElementById("4G").checked = true
                        }
                        else {
                            document.getElementById("WIFI").checked = false
                            document.getElementById("4G").checked = false
                        }
                        document.getElementById("LAN").checked = res.LAN_MODE==1?true:false
                    }
                })
            })
        }
        function set_param(key) {
            var param = {}
            if (key === 'SERVER1') {
                param["SERVER1_FLAG"] = document.getElementById("SERVER1_FLAG").checked ? 1 : 0
                param["SERVER1"] = document.getElementById("SERVER1").value
            }
            else if (key === 'SERVER2') {
                param["SERVER2_FLAG"] = document.getElementById("SERVER2_FLAG").checked ? 1 : 0
                param["SERVER2"] = document.getElementById("SERVER2").value
            }
            else if (key === 'SERVER3') {
                param["SERVER3_FLAG"] = document.getElementById("SERVER3_FLAG").checked ? 1 : 0
                param["SERVER3"] = document.getElementById("SERVER3").value
            }
            else if (key === 'SERVER4') {
                param["SERVER4_FLAG"] = document.getElementById("SERVER4_FLAG").checked ? 1 : 0
                param["SERVER4"] = document.getElementById("SERVER4").value
            }
            else if (key === 'REG') {
                param["REG_FLAG"] = document.getElementById("REG_FLAG").checked ? 1 : 0
                param["REG"] = document.getElementById("REG").value
            }
            else if (key === 'HEART') {
                param["HEART_FLAG"] = document.getElementById("HEART_FLAG").checked ? 1 : 0
                param["HEART"] = document.getElementById("HEART").value
            }
            else if (key === 'NETMODE') {
                var wifi_checkbox = document.getElementById("WIFI")
                var g4_checkbox = document.getElementById("4G")
                if (wifi_checkbox.checked) {
                    param["NETMODE"] = "WIFI"
                }
                else if (g4_checkbox.checked) {
                    param["NETMODE"] = "4G"
                }
                else {
                    param["NETMODE"] = ""
                }
                param["LAN_MODE"] = document.getElementById("LAN").checked ? 1 : 0
            }
            console.log(param)
            fetch("/setparam", {
                method: "POST",
                body: JSON.stringify(param)
            }).then(function (resp) {
                if (resp.status == 200) {
                    alert("设置参数成功")
                }
                else {
                    alert("出了点问题")
                }
            })
        }
        setTimeout(get_param, 5000)
    </script>
</header>

<body>
    <div class="container">
        <h1>Wi-Fi 配网系统</h1>

        <h2>AP WEB 配网</h2>
        <div>
            <button onclick="wifi_scan()">扫描 Wi-Fi</button>
        </div>
        <div>
            <h4>Wi-Fi 列表</h4>
            <select id="aplist" onchange="select_changed()">
                <option value="">Wi-Fi名称</option>
            </select>
            <input type="text" id="ssid" placeholder="输入 Wi-Fi 名称" style="width: 580px;" />
            <input type="text" id="passwd" placeholder="输入 Wi-Fi 密码" style="width: 580px;" />
            <button onclick="wifi_connect()">连接</button>
        </div>
        <div class="seccontainer" style="display: flex; align-items: center;">
            <h4>联网状态:</h4>
            <span id="ipstat" class="status" style="margin:auto;">未联网</span>
            <button onclick="wifi_ipstat()">检查状态</button>
        </div>
        <hr />
        <div class="seccontainer" style="display: flex; align-items: center;">
            <h2>参数配置</h2>
            <span style="margin: auto;"></span>
            <button style="background-color: rgb(197, 73, 73);margin-right: 20px;" onclick="dev_restart()">重启设备</button>
            <button onclick="get_param()">获取参数</button>
        </div>
        <div class="seccontainer">
            <div class="sys-container">
                <label>设备名称：</label>
                <label id="HPROJECT" style="width: auto;">数据传输终端3.1</label>
            </div>
            <div class="sys-container">
                <label>设备编号：</label>
                <label id="DEV_NUMBER" style="width: auto;"></label>
            </div>
            <div class="sys-container">
                <label>IMEI：</label>
                <label id="IMEI" style="width: auto;"></label>
            </div>
            <div class="sys-container">
                <label>ICCID：</label>
                <label id="ICCID" style="width: auto;"></label>
            </div>
            <div class="sys-container">
                <label>联网模式：</label>
                <input type="checkbox" id="WIFI" onclick="wifi_mode_change('WIFI')"/>
                <label>WIFI</label>
                <input type="checkbox" id="4G" onclick="wifi_mode_change('4G')"/>
                <label>4G</label>
                <input type="checkbox" id="LAN"/>
                <label>LAN</label>
                <button onclick="set_param('NETMODE')">设置</button>
            </div>
            <div class="sys-container">
                <label>服务器1：</label>
                <input type="checkbox" id="SERVER1_FLAG" />
                <input type="text" id="SERVER1" placeholder="输入服务器1" />
                <button onclick="set_param('SERVER1')">设置</button>
            </div>
            <div class="sys-container">
                <label>服务器2：</label>
                <input type="checkbox" id="SERVER2_FLAG" />
                <input type="text" id="SERVER2" placeholder="输入服务器2" />
                <button onclick="set_param('SERVER2')">设置</button>
            </div>
            <div class="sys-container">
                <label>服务器3：</label>
                <input type="checkbox" id="SERVER3_FLAG" />
                <input type="text" id="SERVER3" placeholder="输入服务器3" />
                <button onclick="set_param('SERVER3')">设置</button>
            </div>
            <div class="sys-container">
                <label>服务器4：</label>
                <input type="checkbox" id="SERVER4_FLAG" />
                <input type="text" id="SERVER4" placeholder="输入服务器4" />
                <button onclick="set_param('SERVER4')">设置</button>
            </div>
            <div class="sys-container">
                <label>注册包：</label>
                <input type="checkbox" id="REG_FLAG" />
                <input type="text" id="REG" placeholder="输入注册包" />
                <button onclick="set_param('REG')">设置</button>
            </div>
            <div class="sys-container">
                <label>心跳：</label>
                <input type="checkbox" id="HEART_FLAG" />
                <input type="text" id="HEART" placeholder="输入心跳" />
                <button onclick="set_param('HEART')">设置</button>
            </div>
        </div>
        <div class="seccontainer">
            <button style="background-color: rgb(197, 73, 73);" onclick="get_param()">重启设备</button>
        </div>
        <div class="seccontainer" style="text-align: center;">
            <hr />
            <div>Power by <a href="https://3hmis.com/">3H</a></div>
        </div>
    </div>
</body>

</html>